<!doctype html>
<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>Tiny Dashboard - A Bootstrap Dashboard Template</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <link rel="stylesheet" th:href="@{/dash/css/select2.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dropzone.css}">
    <link rel="stylesheet" th:href="@{/dash/css/uppy.min.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.steps.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.timepicker.css}">
    <link rel="stylesheet" th:href="@{/dash/css/quill.snow.css}">
    <!-- Fonts CSS -->
    <!--    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">-->
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dataTables.bootstrap4.css}">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/daterangepicker.css}">
    <!-- App CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>
  </head>

  <body class="vertical  light  ">
    <div class="wrapper">
      <nav th:replace="~{comm/blank::topnav}"/>
      <aside th:replace="~{comm/blank::aside}"/>
      <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12">
              <div class="row align-items-center my-4">
                <div class="col">
                  <h2 class="h3 mb-0 page-title">商品一览</h2>
                </div>
                <div class="col-auto">
                  <a type="button" onclick="getDelItems()" class="btn btn-danger text-light"><span class="fe fe-trash fe-12 mr-2"></span>批量删除</a>
                  <a href="/item/toAdd" type="button" class="btn btn-primary"><span class="fe fe-plus-square fe-12 mr-2"></span>创建商品</a>
                  <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#stockSlide"><span class="fe fe-filter fe-16 text-muted"></span>筛选</button>
                </div>
              </div>

              <div class="row my-4">
                <!-- Small table -->
                <div class="col-md-12">
                  <div class="card shadow">
                    <div class="card-body">
                      <!-- Slide Modal -->
                      <div class="modal fade modal-slide" tabindex="-1" role="dialog"
                           aria-labelledby="defaultModalLabel" aria-hidden="true" id="stockSlide">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="defaultModalLabel">过滤条件</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <i class="fe fe-x fe-12"></i>
                              </button>
                            </div>
                            <div class="modal-body">
                              <div class="p-2">
                                <div class="form-row">
                                  <p class="mb-2"><strong>按商品名搜索</strong></p>
                                  <input id="item-name" type="text" class="form-control" placeholder="商品名">
                                </div>
                                <div class="form-group my-4">
                                  <p class="mb-2"><strong>分类</strong></p>
                                  <label for="multi-select2" class="sr-only"></label>
                                  <select class="form-control select2-multi" id="multi-select2">
                                    <optgroup label="可点击选择多个分类" class="type">
                                      <th:block th:if="${types!=null}" th:each="type:${types}">
                                        <option class="typeItem" th:value="${type.key}" th:text="${type.value}" ></option>
                                      </th:block>

                                    </optgroup>
                                  </select>
                                </div> <!-- form-group -->

                                <div class="form-row">
                                  <p class="mb-2"><strong>按最近进货时间过滤</strong></p>
                                </div>
                                <div class="form-row">
                                  <div class="form-group col-md-6">
                                    <label for="startTime1">起始时间</label>
                                    <input class="form-control" id="startTime1" type="date" name="date" value="2000-01-01">
                                  </div>
                                  <div class="form-group col-md-6">
                                    <label>起始时间</label>
                                    <div class="input-group">
                                      <div class="input-group-prepend">
                                        <div class="input-group-text"><span class="fe fe-clock fe-16"></span></div>
                                      </div>
                                      <input class="form-control" type="time" id="startTime2" name="time" value="00:00">
                                    </div>
                                  </div>
                                </div>
                                <div class="form-row">
                                  <div class="form-group col-md-6">
                                    <label for="endTime1">截止时间</label>
                                    <input class="form-control" id="endTime1" type="date" name="date" value="2222-12-30">
                                  </div>
                                  <div class="form-group col-md-6">
                                    <label>截止时间</label>
                                    <div class="input-group">
                                      <div class="input-group-prepend">
                                        <div class="input-group-text"><span class="fe fe-clock fe-16"></span></div>
                                      </div>
                                      <input class="form-control" type="time" id="endTime2" name="time" value="00:00">
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="modal-footer">
                              <button type="button" id="submit" class="btn mb-2 btn-primary btn-block">搜索</button>
                              <button type="button" class="btn mb-2 btn-secondary btn-block">重置</button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- table -->
                      <table class="table border table-hover bg-white" id="content-table">
                        <thead>
                        <tr role="row">
                          <th>
                            <div class="custom-control custom-checkbox">
                              <input type="checkbox" class="custom-control-input" id="all">
                              <label class="custom-control-label" for="all"></label>
                            </div>
                          </th>
                            <th>预览图</th>
                            <th>商品ID</th>
                            <th>商品名</th>
                            <th>售价</th>
                            <th>进价</th>
                            <th>库存</th>
                            <th>销量</th>
                            <th>分类</th>
                            <th>状态</th>
                            <th>购入时间</th>
                            <th>库存状态</th>
                            <th>操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          <th:block th:if="${items!=null}" th:each="item,cur:${items}" >
                          <tr>
                            <td>
                              <div class="custom-control custom-checkbox">
                                <input name="sel" type="checkbox" class="custom-control-input" th:id="${item.id}">
                                <label class="custom-control-label" th:for="${item.id}"></label>
                              </div>
                            </td>
                            <td>
                              <div class="avatar avatar-sm">
                                <img th:src="${item.image}" alt="..." class="avatar-img rounded-circle" title="" style="">
                              </div>
                            </td>
                            <td th:text="${item.id}"></td>
                            <td th:text="${item.name}"></td>
                            <td th:text="${item.priceSell}"></td>
                            <th:block th:if="${storages == null or storages.get(item.id) == null}">
                              <td th:text="暂无"></td>
                            </th:block>
                            <td th:if="${storages == null or storages.get(item.id)!= null}" th:text="${storages.get(item.id).priceIn}"></td>
                            <td th:text="${item.inventory}"></td>
                            <th:block th:if="${storages.get(item.id) == null}">
                              <td th:text="暂无"></td>
                            </th:block>
                            <td th:if="${storages.get(item.id) != null}" th:text="${storages.get(item.id).sales}"></td>
                            <td th:text="${types.get(item.type)}"></td>
                            <td th:text="${item.status==1?'正常':(item.status==0?'下架':'损耗')}"></td>
                            <td th:text="${#temporals.format(item.createdTime,'yyyy-MM-dd HH:mm:ss')}"></td>
<!--                            <td><span class="dot dot-lg mr-2"-->
<!--                                      th:classappend="${item.inventory<=storage[cur.index].inventoryWarn?'bg-warning':-->
<!--                                      (item.inventory>storage[cur.index].inventoryWarn?'bg-success':'')}"></span></td>-->
                            <th:block th:if="${storages == null or storages.get(item.id) == null}">
                              <td><span class="dot dot-lg mr-2 bg-warning"></span></td>
                            </th:block>
                            <td><span th:if="${storages.get(item.id) != null}" class="dot dot-lg mr-2"
                                      th:classappend="${item.inventory<=storages.get(item.id).inventoryWarn?'bg-warning':
                                      (item.inventory>storages.get(item.id).inventoryWarn?'bg-success':'')}"></span></td>
                            <td><button class="btn btn-sm dropdown-toggle more-horizontal" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <span class="text-muted sr-only">Action</span>
                            </button>
                              <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" th:href="@{/item/detail(itemId=${item.id})}">编辑</a>
                                <a class="dropdown-item" th:href="@{/item/del(itemId=${item.id})}">删除</a>
<!--                                <a class="dropdown-item" href="#">Assign</a>-->
                              </div>
                            </td>
                          </tr>
                          </th:block>
                        </tbody>
                      </table>
                      <nav aria-label="Table Paging" class="my-3">
                        <th:block th:if="${page != null}">
                          <input type="hidden" th:value="${page.current}" id="curPage">
                          <ul class="pagination justify-content-end mb-0">
                            <li class="page-item">
                              <a class="page-link" th:if="${page.current > 1}" th:href="@{'?pageNum='+${page.current -1}}">上一页</a>
                            </li>
                            <!--                  <li class="page-item"><a class="page-link" href="#">1</a></li>-->
                            <!--                  <li class="page-item active"><a class="page-link" href="#">2</a></li>-->
                            <!--                  <li class="page-item"><a class="page-link" href="#">3</a></li>-->
                            <li class="page-item">
                              <a class="page-link" th:if="${page.current < ((page.total/page.size)+1)}" th:href="@{'?pageNum='+${page.current +1}}">
                                下一页</a></li>
                          </ul>
                        </th:block>
                      </nav>
                    </div>
                  </div>
                </div> <!-- simple table -->
              </div> <!-- end section -->
            </div> <!-- .col-12 -->
          </div> <!-- .row -->
        </div> <!-- .container-fluid -->
        <div th:replace="~{comm/blank::modal1}"/>
        <div th:replace="~{comm/blank::modal2}"/>
      </main> <!-- main -->
    </div> <!-- .wrapper -->
    <script th:src="@{/dash/js/apps.js}"></script>
    <script th:src="@{/dash/js/jquery.min.js}"></script>
    <script th:src="@{/dash/js/popper.min.js}"></script>
    <script th:src="@{/dash/js/moment.min.js}"></script>
    <script th:src="@{/dash/js/bootstrap.min.js}"></script>
    <script th:src="@{/dash/js/simplebar.min.js}"></script>
    <script th:src='@{/dash/js/daterangepicker.js}'></script>
    <script th:src='@{/dash/js/jquery.stickOnScroll.js}'></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src="@{/dash/js/config.js}"></script>
    <script th:src="@{/dash/js/d3.min.js}"></script>
    <script th:src="@{/dash/js/topojson.min.js}"></script>
    <script th:src="@{/dash/js/datamaps.all.min.js}"></script>
    <script th:src="@{/dash/js/datamaps-zoomto.js}"></script>
    <script th:src="@{/dash/js/datamaps.custom.js}"></script>
    <script th:src='@{/dash/js/jquery.dataTables.min.js}'></script>
    <script th:src='@{/dash/js/dataTables.bootstrap4.min.js}'></script>
    <script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
    <script th:src="@{/dash/js/gauge.min.js}"></script>
    <script th:src="@{/dash/js/jquery.sparkline.min.js}"></script>
    <script th:src='@{/dash/js/jquery.mask.min.js}'></script>
    <script th:src='@{/dash/js/select2.min.js}'></script>
    <script th:src='@{/dash/js/jquery.steps.min.js}'></script>
    <script th:src='@{/dash/js/jquery.validate.min.js}'></script>
    <script th:src='@{/dash/js/jquery.timepicker.js}'></script>
    <script th:src='@{/dash/js/dropzone.min.js}'></script>
    <script th:src='@{/dash/js/uppy.min.js}'></script>
    <script th:src='@{/dash/js/quill.min.js}'></script>
    <script>
      $('#dataTable-1').DataTable(
      {
        autoWidth: true,
        "lengthMenu": [
          [16, 32, 64, -1],
          [16, 32, 64, "All"]
        ]
      });
    </script>
    <script>

      function getDelItems(){
        const items = []
        console.log($("input:checkbox[name='sel']:checked"))
        $("input:checkbox[name='sel']:checked").each(function (index) {
          items[index] = $(this).attr('id')
        })
        console.log(items.toLocaleString())

        $.post('/item/delete/'+items.toLocaleString(),function(data,status){
          // alert("Data: " + data + "nStatus: " + status);
          alert("Status: " + status);
          window.location.href = '/item/list'
        });
      }

      $(function(){
        //init
        const types = $('.type').find(".typeItem")
        const arr = []
        let idx = 0;
        while (idx < types.length) {
          let tmp = types[idx++]
          let typeTmp = {"id":"", "name":""}
          // console.log(tmp)
          typeTmp["id"]=tmp.value
          typeTmp["name"]=tmp.innerText
          // console.log(typeTmp)
          arr.push(typeTmp)
          // console.log(tmp.innerText)
        }
        console.log(arr)

        $('#submit').click(function () {

          console.log($('#startTime1').val()+' '+$('#startTime2').val())
          console.log($('#endTime1').val()+' '+$('#endTime2').val())
          console.log($('#item-name').val())
          //×用复制的 不是x
          let text = $('.selection').find('.select2-selection__choice').text().split('×')
          text.splice(0,1)
          console.log(text)
          let res = []
          for (let i = 0;i < text.length;i++){
            for (const a in arr) {
              if (arr[a].name==text[i]){
                //只要id
                res.push(arr[a].id)
                break
              }
            }
          }
          res=res.map(Number)
          console.log(res)
          const start = $('#startTime1').val() + ' ' + $('#startTime2').val()+':00'
          const end = $('#endTime1').val() + ' ' + $('#endTime2').val()+':00'
          const typeIdList = res
          const name = $('#item-name').val()
          console.log('ready..')
          // $('#time-limit').text(start+' - '+end)
          // const url = '/dashboard/indents?pageNum='+curPage+'&start='+start+'&end='+end+'&typeList='+typeIdList
          const obj = {
            "typeIdList": typeIdList,
            "start": start,
            "end": end,
            "name": name
          }
          console.log(obj)
          $.ajax({
            url: '/item/list',
            type:"get",
            data: obj,
            contentType:"application/json;charset=utf-8",
            success:function(data){
              console.log(data)
              // const newContent1 = $(data).find("#content-table")
              // $("#content-table").replaceWith(newContent1)
              $('#content-table').replaceWith($(data).find("#content-table"))
            }
          })
        })
      });
    </script>
    <script>
      $('.select2').select2(
              {
                theme: 'bootstrap4',
              });
      $('.select2-multi').select2(
              {
                multiple: true,
                theme: 'bootstrap4',
              });
      $('.drgpicker').daterangepicker(
              {
                singleDatePicker: true,
                timePicker: false,
                showDropdowns: true,
                locale:
                        {
                          format: 'YYYY-MM-DD'
                        }
              });
      $('.time-input').timepicker(
              {
                'scrollDefault': 'now',
                'zindex': '9999' /* fix modal open */
              });
      /** date range picker */
      if ($('.datetimes').length)
      {
        $('.datetimes').daterangepicker(
                {
                  timePicker: true,
                  startDate: moment().startOf('hour'),
                  endDate: moment().startOf('hour').add(32, 'hour'),
                  locale:
                          {
                            format: 'M/DD hh:mm A'
                          }
                });
      }
      var start = moment().subtract(29, 'days');
      var end = moment();

      function cb(start, end)
      {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
      }
      $('#reportrange').daterangepicker(
              {
                startDate: start,
                endDate: end,
                ranges:
                        {
                          'Today': [moment(), moment()],
                          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                          'This Month': [moment().startOf('month'), moment().endOf('month')],
                          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                        }
              }, cb);
      cb(start, end);
      $('.input-placeholder').mask("00/00/0000",
              {
                placeholder: "__/__/____"
              });
      $('.input-zip').mask('00000-000',
              {
                placeholder: "____-___"
              });
      $('.input-money').mask("#.##0,00",
              {
                reverse: true
              });
      $('.input-phoneus').mask('(000) 000-0000');
      $('.input-mixed').mask('AAA 000-S0S');
      $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
              {
                translation:
                        {
                          'Z':
                                  {
                                    pattern: /[0-9]/,
                                    optional: true
                                  }
                        },
                placeholder: "___.___.___.___"
              });
      // editor
      var editor = document.getElementById('editor');
      if (editor)
      {
        var toolbarOptions = [
          [
            {
              'font': []
            }],
          [
            {
              'header': [1, 2, 3, 4, 5, 6, false]
            }],
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [
            {
              'header': 1
            },
            {
              'header': 2
            }],
          [
            {
              'list': 'ordered'
            },
            {
              'list': 'bullet'
            }],
          [
            {
              'script': 'sub'
            },
            {
              'script': 'super'
            }],
          [
            {
              'indent': '-1'
            },
            {
              'indent': '+1'
            }], // outdent/indent
          [
            {
              'direction': 'rtl'
            }], // text direction
          [
            {
              'color': []
            },
            {
              'background': []
            }], // dropdown with defaults from theme
          [
            {
              'align': []
            }],
          ['clean'] // remove formatting button
        ];
        var quill = new Quill(editor,
                {
                  modules:
                          {
                            toolbar: toolbarOptions
                          },
                  theme: 'snow'
                });
      }
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function()
      {
        'use strict';
        window.addEventListener('load', function()
        {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');
          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form)
          {
            form.addEventListener('submit', function(event)
            {
              if (form.checkValidity() === false)
              {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    </script>
  </body>
</html>
